<template>
	<div class="messageOrder">
        <myNavbar title="订单消息"></myNavbar>
		<list class="message_item_content" >
			<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
			         :display="refreshing ? 'show' : 'hide'">
			    <text class="indicator-text">{{refreshTitle}}</text>
			</refresh>
			<cell v-for="item  in orders" v-if="orders.length>0">
				<div class="message_item">
					<div><text class="message_time">{{item.sendDate}}</text></div>
					<div class="message_box" @click="infoClick(item.msgContent.id)">
						<div class="box_head">
							<div><text class="message_box_tittle">{{item.msgTitle}}</text></div>
							<icon class="icon" content="tb-right" fontSize="38"></icon>
						</div>
						<div class="box_body">
							<div class="photo_content">
								<image style="width:150px;height:150px" :src="item.msgContent.itemList[0].thumbnail"></image>
							</div>
							<div class="box_body_message">
								<div><text class="message_text">{{item.msgContent.title}}</text></div>
								<div><text class="message_sn">订单编号:{{item.msgContent.sn}}</text></div>
							</div>
						</div>
					</div>
				</div>
			</cell>
			<cell style="flex: 1;">
				<noDate v-if="orders.length == 0" subTitle="可以去看看有哪些想买的" noDataText="您还没有相关的订单消息"></noDate>
			</cell>
			<loading class="loading" @loading="onloading"
			         :display="loadinging ? 'show' : 'hide'">
			    <text class="indicator-text">加载中...</text>
			</loading>
		</list>
	</div>

</template>
<script>

	const eeui = app.requireModule('eeui');
	import {
		list,
		markAsRead,
		unReadCount,
		update
	} from "../../../../api/msgPush"
	import noDate from '../../../../components/noData/noData.vue'
    import myNavbar from '../../../../components/myNavbar/myNavbar.vue'
	export default {
		name: 'messageOrder',
		data() {
			return {
				loadinging: false,
				refreshing:false,
				pageSize: 10,
				msgKey: 'msg-order',
				orders: [],
				refreshTitle:'释放刷新页面...'
			}
		},
		created() { // 在实例创建完成后被立即调用
			this.loadMsgList()
		},
		methods: {
			onrefresh(event) {
				this.refreshing = true
				this.refreshTitle = '加载中...'
				setTimeout(() => {
					this.pageSize=10
					this.refreshing = false
					this.loadMsgList()
				}, 1000)
			},
			onpullingdown(event) {
				this.refreshTitle = '释放刷新页面...'
			},
			infoClick(id) {

				eeui.openPage({
					pageName: 'componentsOrder',
					url: 'root://pages/member/order/details.js',
					params: id,
                    statusBarType: 'immersion',
                    statusBarStyle:false
				})
			},

			onloading(event) {
				this.loadinging = true
				setTimeout(() => {
					this.loadinging = false
					this.pageSize += 10
					this.loadMsgList()
				}, 1000)
			},
			loadMsgList() {
				var _this = this
				list({
					msgKey: this.msgKey,
					pageSize: this.pageSize,
					mchId: this.getGlobalData().mchId
				}).then(res => {
					res.data.data.forEach(item => {
						item.sendDate = this.formatTime(item.sendDate)
						item.msgContent = JSON.parse(item.msgContent)
						if (item.readStatus == 2) {
							item.readStatus = 1
						}
						item.msgContent.itemList[0].thumbnail = _this.thumbnail(item.msgContent.itemList[0].thumbnail,150,150)
					})
					this.orders = res.data.data
					markAsRead({
						msgKey: this.msgKey,
					}).then(res => {

					})
				})
			},
		},
		components: {
			noDate,myNavbar
		},
	}
</script>

<style scoped>
	.messageOrder {
		background-color: rgb(248, 248, 248);
	}
	.refresh {
		/*height: 60px;*/
	    width: 702px;
	    display: -ms-flex;
	    display: -webkit-flex;
	    display: flex;
	    -ms-flex-align: center;
	    -webkit-align-items: center;
	    -webkit-box-align: center;
	    align-items: center;
        /* padding-bottom: 30px; */
	  }
	.loading {
		/*height: 50px;*/
		width: 702px;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		align-items: center;
        padding-bottom: 30px;
	}

	.navbar {
		width: 750px;
		height: 100px;
		margin-bottom: 20px;
	}

	.icon {
		width: 50px;
		height: 50px;
		color: rgba(42, 42, 54);
		opacity: 0.3;

	}

	.message_content {
		display: flex;
		padding-right: 30px;
		padding-left: 30px;
		flex-direction: column;
		margin-top: 20px;
	}

	.message_head {
		margin-left: 5px;
		width: 682px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.message_tittle {
		height: 33prx;
		font-size: 34px;
		font-weight: 500;
		color: rgba(26, 26, 30, 1);
		margin-left: 95px;
	}

	.message_all {
		height: 28px;
		font-size: 30px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
	}

	.message_item_content {
		display: flex;
		flex-direction: column;
		padding-left: 24px;
		padding-right: 24px;
		padding-top: 20px;
		overflow: auto;
	}

	.message_item {
		display: flex;
		width: 702px;
		margin-top: 20px;
		flex-direction: column;
		margin-bottom: 20px;
	}

	.message_time {
		text-align: center;
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		opacity: 0.3;
	}

	.message_box {
		margin-top: 38px;
		width: 702px;
		/* height: 272px; */
		background-color: rgba(255, 255, 255, 1);
		border-radius: 16px;
	}

	.box_head {
		margin-top: 32px;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
	}

	.message_box_tittle {
		margin-left: 25px;
		font-size: 28px;
		font-weight: 400;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: row;
		color: rgba(26, 26, 30, 1);
		line-height: 36px;
	}

	.circular {
		width: 10px;
		height: 10px;
		background: rgba(231, 91, 83, 1);
		border: 2px solid rgba(231, 91, 83, 1);
		border-radius: 50%;
		margin-left: 16px;
	}

	.infoIcon {
		margin-right: 30px;
		color: rgba(42, 42, 54, 0.3);
	}

	.box_body {
		display: flex;
		flex-direction: row;
		padding-left: 24px;
		padding-right: 24px;
		padding-bottom: 24px;
	}

	.photo_content {
		width: 150px;
		height: 150px;
		background: rgba(250, 250, 250, 1);
		border-radius: 4px;
		/* margin-left: 24px; */
		margin-top: 38px;
	}

	.box_body_message {
		display: flex;
		flex-direction: column;
		margin-top: 36px;
		margin-left: 21px;
	}

	.message_text {
		width: 485px;
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		opacity: 0.5;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		/* min-height: 59px; */
	}

	.message_sn {
		/* height: 23px; */
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		opacity: 0.5;
		margin-top: 30px;
	}
    .indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }
	.indicator-text {
	    color: #888888;
	    font-size: 22px;
	    text-align: center;
		padding-top: 20px;
	}
	
</style>
